Skip to main content

Tag

Tags provide quick contextual keywords to inform status of a row or item.

Examples

Default

Variations

Usage

When to use Tags

  • When there is a list of information with different statuses for different items

How this component works

  • Only one tag should be used per instance.
  • The trailing icon is optional, as the status definition will not apply in all use cases. When the icon is used, the tag becomes a tappable button and opens a full panel.

Choosing between variations

  • Static vs Interactive
    • Static: To indicate a status that does not need further explanation or definition
    • Interactive: When you need to provide additional context for a status, use the interactive version with the icon.
  • Status
    • Informative (blue): To indicate neutral, default content. Consider the Informative status for new content with expected changes in status and trailing actions to take, like an Active prescription.
    • Success (green): To indicate completed, finalized content. Consider the Success status for content with no further outstanding tasks, like a Confirmed appointment, or an In-Progress prescription refill.
    • Indeterminate/Unresolved (yellow): To indicate pending actions or content that is still in-progress. Consider the Indeterminate status for content either the system or user can resolve, like a Pending appointment, or an On-Hold prescription refill.
    • Inactive (gray): To indicate content that has no further actions. Consider the Inactive status for "dead ends", such as a Read message, a Canceled appointment, or an Expired prescription.

Instances of this component in production

  • In Prescription cards
  • In Appointment cards

Content considerations

  • Use common VA language, words, or terms for copy.
  • Keep copy to as few words as possible (1-2 words). There are exceptions where 3 or 4 words must be used in cases of VA-specific phrases or words.
  • The trailing info icon is optional. Not all tags will need one for further definition of the copy.
  • Use sentence case (i.e., Sentence case, not Title Case). Exceptions include words/phrases that use Title Case in other VA tools/sites.
  • The trailing icon should clearly describe the type of content that it will display. For example, use the info icon when additional information will display on tap.

Accessibility considerations

  • If user has magnification settings, the trailing info-icon should scale along with the font.
  • The icon is decorative, so it does not need to be read by a screen reader. If the icon is included, the tag should be read as a button.

Code usage

Common component to show a text inside a tag

NameTypeDefault ValueRequiredDescription
textstringYesMessage to be shown on the tag
labelTypeLabelTagTypesYesDefines the color and look of the tag
a11yLabelstringNoOptional accessibility label
onPress() => voidNoOptional method called when tag is pressed
a11yHintstringNoOptional accessibility hint if there is an on press
a11yRoleAccessibilityRoleNoOptional role to override the default role of button